<template>
  <div id="app">
    <!-- 顶部 -->
    <Topbar :key="topbarkey"></Topbar>
    <Header></Header>
    <router-view  @updateKey="updateKeyFn"/>
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 调用登录组件 -->
    <!-- 数据共享  -->
    <Login v-show="isShowLoginModal"></Login>
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>

<script>
// 导入子组件
import Topbar from "./components/Topbar.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import axios from "@/request/request.js";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";
import { mapState } from "vuex";
import { JingPinAPI, ReMenAPI } from "@/request/api.js";
export default {
  data() {
    return {
      topbarkey: 0,
    };
  },
  components: {
    // 注册组件
    Topbar,
    Header,
    Footer,
    Login,
    Toast,
  },
  async created() {
    // console.log("请求数据");

    /* 
      问题一 多个组件请求,但请求的地址都是一样
      解决方法:使用创建axios实例方法,设置请求域名地址
      src 下创建request 文件夹,再创建request.js 封装axios
    
      问题二 多个组件有不同的请求,地址改变的话,也要找到相应的组件修改,为了容易遭到组件来修改
      优化方案:统一管理接口地址, .request 文件下创建api.js

      问题三 如果项目中请求必须要是按照顺序123 可能会出现回调地狱
             优化方案： 使用async+await     
              async+await 异步的解决方案之一，可以使得异步代码同步化。 
              await等待promise，resolve结果
              await关键字需要在async修饰的函数内

    */

    //解决问题一
    // axios.get("products/recommend").then((res)=> {
    //   console.log("请求结果为:",res);
    // })

    // 解决问题二
    // JingPinAPI().then((res)=> {
    //   console.log("请求结果为:",res);
    // })

    // 解决问题三
    // let  res = await JingPinAPI();
    // console.log("1",res);
    // console.log("2");
  },
  computed: {
    ...mapState({
      // 自定义属性名:state=>state.模块名.属性
      isShowLoginModal: (state) => state.showModal.isShowLoginModal,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  methods:{
    updateKeyFn() {
      // console.log("父收到子");
      this.topbarkey++;
    }
  },
// 可能会出现一个bug 刷新时,也会触发一次watch
  // 现象 扫码时 会有两次登录请求
  watch:{
    "$route.path": {
      handler(newVal,oldVal) {
        // console.log("方式二组件 地址变化了...",newVal,oldVal);
        // 如果旧地址为 / 不需要进行重载
        if(oldVal != "/") {
          this.topbarkey++;
        }

      }
    }
  }
};
</script>


<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
